{% extends "base.html" %}

{% block title %}Start{% endblock %}

{% block body %}
    <div class="jumbotron p-3 p-md-5 text-white rounded bg-dark bg-jumbotron">
        <div class="col-md-6 px-0">
            <h1 class="display-4 font-italic">Welcome to StarTale Cloud Services</h1>
            <p class="lead my-3">PassNote is an new and efficient way to manage and protect your passwords</p>
            <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Start your journey...</a></p>
        </div>
    </div>

    <div class="card flex-md-row mb-4 box-shadow h-md-250">
        <div class="card-body d-flex flex-column align-items-start">
            <strong class="d-inline-block mb-2 text-primary">Featured</strong>
            <h3 class="mb-0">
                <a class="text-dark" href="#">Cross Platforms</a>
            </h3>
            <div class="mb-1 text-muted">Wherever and whenever</div>
            <p class="card-text mb-auto">
                You can access <b>PassNote</b> from all devices because it was designed for crossing platforms.
            </p>
            <a class="btn-link disabled" href="#">Learn more</a>
        </div>
        <img class="card-img-right flex-auto d-none d-md-block" style="width: 700px; height: 250px;" src="/Site/static/image/Feature1-light.jpg">
    </div>

    <div class="card flex-md-row mb-4 box-shadow h-md-250">
        <img class="card-img-left flex-auto d-none d-md-block" src="/Site/static/image/Feature2-light.jpg" style="width: 700px; height: 250px;">
        <div class="card-body d-flex flex-column align-items-start">
            <strong class="d-inline-block mb-2 text-success">Featured</strong>
            <h3 class="mb-0">
                <a class="text-dark" href="#">Secure & Reliable</a>
            </h3>
            <div class="mb-1 text-muted">Enjoy it relaxed</div>
            <p class="card-text mb-auto text-left">
                <b>PassNote</b> use strong encryption to protect your private information and no privacy will save on our server.
            </p>
            <a class="btn-link text-right disabled" style="width: 100%;" href="#">Learn more</a>
        </div>
    </div>

    <main role="main" class="container">
        <div class="row">
            <div class="col-md-8 blog-main">
                <h3 class="pb-3 mb-4 font-italic border-bottom">
                    TimeLine
                </h3>

                <div class="my-3 p-3 bg-white rounded box-shadow">
                    <h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6>
                    {% for index in hitokoto_range %}
                        <div class="media text-muted pt-3">
                            <img id="img-hitokoto-{{ index }}" alt="32x32" class="mr-2 rounded"
                                 style="width: 32px; height: 32px;" src="/api/utils/placeholder/48x48">
                            <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                                <strong class="d-block text-gray-dark">
                                    @<span id="span-from-{{ index }}">{% lorem 2 w random %}</span>
                                </strong>
                                <span id="span-hitokoto-{{ index }}">{% lorem 15 w random %}</span>
                            </p>
                        </div>
                        <script>
                            $(document).ready(function () {
                                $.get("/api/utils/img_url/48/48", function (data, status) {
                                    $('#img-hitokoto-{{ index }}').attr('src', data)
                                })
                                $.get('/api/utils/hitokoto', function (data, status) {
                                    $("#span-from-{{ index }}").text(data.data.from_where);
                                    $('#span-hitokoto-{{ index }}').text(data.data.hitokoto);
                                })
                            })
                        </script>
                    {% endfor %}
                    <small class="d-block text-right mt-3">
                        <a href="#">All updates</a>
                    </small>
                </div>

                <div class="blog-post">
                    <h2 class="blog-post-title">Get started with PassNote!</h2>
                    <p class="blog-post-meta">July 18, 2018 by <a href="#">DealiAxy</a></p>

                    <p>
                        PassNote is an new and efficient way to manage and protect your passwords.<br>
                        You can access PassNote from all devices because it was designed for crossing platforms<br>
                        PassNote use strong encryption to protect your private information and no privacy will save on
                        our
                        server.
                    </p>
                    <ul>
                        <li>Access PassNote from all your devices.</li>
                        <li>PassNote is design for secure & reliable.</li>
                    </ul>
                    <p>Be worry about the security of your accounts and passwords? Now PassNote will save your valuable
                        time.</p>
                </div><!-- /.blog-post -->

                <nav class="blog-pagination">
                    <a class="btn btn-outline-secondary" href="#">Previous</a>
                    <a class="btn btn-outline-primary" href="#">Next</a>
                </nav>

            </div><!-- /.blog-main -->

            <aside class="col-md-4 blog-sidebar">
                <ul class="list-unstyled list-group-flush">
                    <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                       href="/site/account">
                        <span>
                            <i class="material-icons-sm">account_balance</i>
                            <span>My Accounts</span>
                        </span>
                        <span class="badge badge-primary badge-pill">{{ user_info.accounts.all|length }}</span>
                    </a>
                    <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                       href="/site/account">
                        <span>
                            <i class="material-icons-sm">extension</i>
                            <span>Account Platforms</span>
                        </span>
                        <span class="badge badge-primary badge-pill">{{ user_info.account_platforms.all|length }}</span>
                    </a>
                    <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                       href="/site/account">
                        <span>
                            <i class="material-icons-sm">gavel</i>
                            <span>Recent Updates</span>
                        </span>
                        <span class="badge badge-primary badge-pill">{{ hitokoto_range|length }}</span>
                    </a>
                </ul>

                <br>

                <ol class="list-group-flush list-unstyled">
                    <h4 class="text-center list-group-item">Platforms</h4>
                    <a class="list-group-item list-group-item-action" href="#">
                        <i class="material-icons-sm">phonelink</i>
                        <span class="text-muted">Web for all platforms</span>
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                        <i class="material-icons-sm">desktop_mac</i>
                        <span class="text-muted">Desktop for Mac</span>
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                        <i class="material-icons-sm">desktop_windows</i>
                        <span class="text-muted">Desktop for Windows</span>
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                        <i class="material-icons-sm">android</i>
                        <span class="text-muted">Mobile App for Android</span>
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                        <i class="material-icons-sm">phone_iphone</i>
                        <span class="text-muted">Mobile App for iPhone</span>
                    </a>
                </ol>

                <ol class="list-group-flush list-unstyled">
                    <h4 class="text-center list-group-item">Links</h4>
                    <a class="list-group-item list-group-item-action"
                       href="https://github.com/Deali-Axy">
                        <i class="material-icons-sm">link</i>
                        <span class="text-muted">DealiAxy's Github</span>
                    </a>
                    <a class="list-group-item list-group-item-action"
                       href="https://blog.deali.cn">
                        <i class="material-icons-sm">web</i>
                        <span class="text-muted">Blog Home</span>
                    </a>
                    <a class="list-group-item list-group-item-action"
                       href="https://github.com/Deali-Axy">
                        <i class="material-icons-sm">code</i>
                        <span class="text-muted">Codes on Gitee</span>
                    </a>
                    <a class="list-group-item list-group-item-action"
                       href="https://weibo.com/axy12">
                        <i class="material-icons-sm">wifi</i>
                        <span class="text-muted">Weibo Home</span>
                    </a>
                    <a class="list-group-item list-group-item-action"
                       href="https://github.com/Deali-Axy">
                        <i class="material-icons-sm">home</i>
                        <span class="text-muted">DealiAxy's Homepage</span>
                    </a>
                </ol>
            </aside><!-- /.blog-sidebar -->


        </div><!-- /.row -->
    </main><!-- /.container -->

{% endblock %}

